
 <!--接单业务单详情页-->
 <template>
   <div style="padding-bottom: 47px;">
    <app-head :show="showstate" :title="pagetitle"></app-head>
    <div class="car-bbinfo-card mb30">
      <div class="bbno lineb">业务单号：{{OrderData.BBillNo}}</div>
      <div class="bbmain">
        <p class="displayflex"><i>委托货主</i><label class='flex1'>{{OrderData.CargoOwnerName}}</label></p>
        <p class="displayflex"><i>制单日期</i><label class='flex1'>{{OrderData.CreateTime | time}}</label></p>
        <p class="displayflex"><i>送货地址</i><label class='flex1'>{{OrderData.ArrivalCity | city}}{{OrderData.ArrivalDistrict | district}}{{OrderData.ArrivalAddress}}</label></p>
        <p class="displayflex"><i>联系人</i><label class='flex1'>{{OrderData.SendContacts}} {{OrderData.SendContactsTel}}</label></p>
        <p class="displayflex"><i>订单件数</i><label class='flex1'>{{OrderData.Pkgs}}件</label></p>
        <p class="displayflex" v-if="OrderData.ConPKGS && OrderData.ConPKGS !== ''">
          <i>提货件数</i>
          <label class='flex1'>{{OrderData.ConPKGS}}件</label>
        </p>
        <p class="displayflex" v-if="OrderData.RecPKGS && OrderData.RecPKGS !== ''">
          <i>签收件数</i><label class='flex1'>{{OrderData.RecPKGS}}件</label>
        </p>
      </div>
    </div>

    <div class="car-bbinfo-card excep mb30" v-if="OrderData.TEType && OrderData.TEType !== ''"> 
      <div class="bbmain">
        <p>异常原因<label>{{OrderData.ExceptionMemo || OrderData.Information}}</label></p>
        <p>记录时间<label>{{OrderData.RDate | timeshort}}</label></p>
      </div>
    </div>


    <div class="car-bbinfo-list">
      <div class="bbtitle lineb"><i class="iconfont icon-cargo circle"></i> {{hasSplitItem ? OrderData.BbDetails.length - 1: OrderData.BbDetails.length}}种商品</div>
<!--       
      <scroller lock-x scrollbar-y use-pullup :height="(scrollerHeight).toString()" v-if="OrderData.Tratvehicleex.length>0" :pullup-config="ScrollerConfig" ref="Scroller">
        <div> -->
          <div class="bbitem mb30 displayflex" v-for="item in OrderData.BbDetails" v-if="item.GoodsName != '拼箱药品'">
            <img :src="item.PictContent | filterImgUrl">
            <div class="flex1 specs" v-if="item.GoodsGuid">
              <p class="ft17 mb10 name">{{item.GoodsName}}</p>
              <p>规格：{{item.GoodsSpec}}</p>
              <p style="word-break:break-all">厂商：{{item.Producer}}</p>
              <p>件数：{{item.Qty}}{{item.Unit}}</p>
              <p v-if="item.LCLNumbers && item.LCLNumbers !== ''">箱号：{{item.LCLNumbers}}</p>
            </div>
            <div class="flex1 specs" v-else>
              <p class="ft17 mb10 name">拼箱商品</p>
            </div>
          </div>
        <!-- </div>
      </scroller> -->
    </div>

    <uploader :title="'提货凭证'" :img-list="Img52" :max="0" v-if="Img52.length > 0"></uploader>
    <uploader :title="'交货凭证'" :img-list="Img56" :max="0" v-if="Img56.length > 0"></uploader>
    <uploader :title="'签收凭证'" :img-list="Img81" :max="0" v-if="Img81.length > 0"></uploader>

    <footer-menu :status='2'></footer-menu>
  </div>
</template>
<script>
import footerMenu from "@/components/core/footer/manage.footer.vue";
import appHead from '@/components/core/header/app_headbar.vue';
import uploader from '@/components/share/imageUploader/imageUploader.vue';

import { mapGetters, mapState } from 'vuex'

export default {
  components:{
    footerMenu,
    appHead,
    uploader,
  },
  data(){
    return{
      OrderData:{
        BbDetails:[],
        SplitItems:[],
        Tratvehicleex:[],
        HandoverList:[],
      },
      ScrollerConfig: {
        content: "",
        downContent: "",
        height: 0,
        loadingContent: "",
        upContent: ""
      },
      Img52: [],
      Img56: [],
      Img81: [],
      mh:0,

      hasSplitItem: false,
    }
  },
  mounted(){
  },
  created(){
    this.getData();
  },
  computed: {
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  methods: {
     getData() {
      var self =this;
      var query = {
        BBillGuid: this.$route.query.Guid,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };
      this.Ajax.post("GetTaskorderDetailEX", query).then((resp) => {
        if (resp.IsSuccess) {
          let BbDetails = resp.Data.BbDetails,
              SplitItems = resp.Data.SplitItems;

          BbDetails.forEach(x => {
            let LCLNumbers = [];
            SplitItems.forEach(y => {
              if(x.GoodsGuid == y.GoodsGuid) {
                LCLNumbers.push(y.LCLNumber);
              }
            })
            x.LCLNumbers = LCLNumbers.join();
          })

          if(resp.Data.HandoverList && resp.Data.HandoverList.length > 0){
            resp.Data.HandoverList.forEach((x, i) => {
              let Obj = {},
                  Json = [];
              Obj = x.HandoverPict !== '' && x.HandoverPict?JSON.parse(x.HandoverPict):{};
              if(Object.keys(Obj).length > 0){
                Json = Json.concat(Obj.bbill?Obj.bbill : []);
                Json = Json.concat(Obj.platenumber?Obj.platenumber : []);
                Json = Json.concat(Obj.invoice?Obj.invoice : []);
                Json = Json.concat(Obj.logistics?Obj.logistics : []);
                switch(x.HandoverType){
                  case '1':
                    this.Img52 = Json;
                    break;
                  case '2':
                    this.Img56 = Json;
                    break;
                  case '3':
                    this.Img81 = Json;
                    break;
                }
              }
            });
          }


          self.OrderData = resp.Data;



          if(this.OrderData.SplitItems && this.OrderData.SplitItems.length > 0) {
            this.hasSplitItem = true;
          }

          this.$nextTick(()=>{
            this.$store.dispatch("cfg/setConHeight");
          })
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
  },
}
</script>

